<template>
  <div class="index-banner">
    <swiper indicator-dots autoplay circular class="swiper">
      <swiper-item v-for="item in banners" class="swiper-item">
        <image class="img" :src="item.src" mode="scaleToFill" />
       
      </swiper-item>
    </swiper>
  </div>
</template>

<script setup lang="ts">
const banners = [
  {
    src: "../../static/banner/1.png",
    id: 1,
  },
  {
    src: "../../static/banner/2.png",
    id: 2,
  },
  {
    src: "../../static/banner/3.png",
    id: 3,
  },
];
</script>

<style scoped lang="scss">
.index-banner {
  width: 100%;
  height: 15%;
  .swiper {
    height: 100%;

    .swiper-item {
      border-radius: 0.5rem;

      .img {
        width: 100%;
      }
    }
  }
}
</style>
